<template>
  <div>
    <el-form label-width="150px" class="demo-ruleForm" :label-position="form.labelp" :rules="form.rules">
      <el-form-item :label="item.label" :prop="item.name" :key="item.name" v-for="item in form.items" v-if="item.type!='slot'">
        <el-input v-model="item.value" :placeholder="item.placeholder" :disabled="item.disabled" :readonly="item.readonly" :style="item.style" v-if='item.type=="input"'></el-input>
        <el-select v-model="item.value" :placeholder="item.placeholder" v-if='item.type=="select"'>
          <el-option :label="list.title" :value="list.id" :key="list.id" v-for="list in item.list">
          </el-option>
        </el-select>
        <el-date-picker v-model="item.value" type="date" :editable="isEditable" :placeholder="item.placeholder" v-if='item.type=="date"'>
        </el-date-picker>
        <el-date-picker v-model="item.value" type="datetime" :editable="isEditable" :placeholder="item.placeholder" v-if='item.type=="datetime"'>
        </el-date-picker>
        <el-date-picker v-model="item.value" type="daterange" :editable="isEditable" range-separator="至" :start-placeholder="item.start.placeholder" :end-placeholder="item.end.placeholder" v-if='item.type=="daterange"'>
        </el-date-picker>
        <template v-if='item.type=="timerange"'>
          <el-time-select v-model="item.start.value" :picker-options="{
    start:item.startTime,
    step:item.step,
    end:item.endTime
  }" :placeholder="item.start.placeholder" :editable="isEditable">
          </el-time-select>
          <span :span="2">至</span>
          <el-time-select v-model="item.end.value" :picker-options="{
    start:item.startTime,
    step:item.step,
    end:item.endTime
  }" :placeholder="item.end.placeholder" :editable="isEditable">
          </el-time-select>
        </template>
        <el-radio-group v-model="item.value" :disabled="item.disabled" v-if='item.type=="radio"'>
          <el-radio :label="list.id" :key="list.id" v-for="list in item.list">{{list.title}}</el-radio>
        </el-radio-group>
        <el-checkbox-group v-model="item.value" v-if='item.type=="checkbox"'>
          <template v-for="list in item.list">
            <el-checkbox :label="list.id">
              {{list.title}}
            </el-checkbox>
          </template>
        </el-checkbox-group>
        <el-switch v-model="item.value" v-if='item.type=="switch"'>
        </el-switch>
        <el-input type="textarea" v-model="item.value" :placeholder="item.placeholder" :rows="item.rows==null?6:item.rows" v-if='item.type=="textarea"'></el-input>
        <el-input-number v-model="item.value" :precision="item.precision" :step="item.step" :min="item.min==null?0:item.min" :max="item.max" v-if='item.type=="number"'></el-input-number>
        <uploadImage ref="uploadImage" v-model='item.imgUrl' :limit='item.limit' :url='item.url' :index='item.index' :multiple='item.multiple' @getImg='getImage' v-if='item.type=="img"'>
        </uploadImage>
        <uploadImgs ref="uploadImgs" v-model='item.list' :limit='item.limit' :url='item.url' :index='item.index' :multiple='item.multiple' @getImg='getImage' v-if='item.type=="images"'>
        </uploadImgs>
        <uploadFile ref="uploadFile" v-model='item.fileList' :action="item.action" :index="item.index" @getFile="getFile" v-if="item.type=='file'">
        </uploadFile>
        <el-input v-model="item.value" :placeholder="item.placeholder" :disabled="item.disabled" :readonly="item.readonly" :style="item.style" onkeyup="this.value=/^\d+\.?\d{0,2}$/.test(this.value) ? this.value : this.value.substring(0,this.value.length-1)" v-if='item.type=="currency"' ></el-input>
      </el-form-item>
      <slot name="slot"></slot>
      <el-form-item v-if="!form.readOnly">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import utils from '../ttJs/utils.js'
import uploadImage from '@/tt_components/uploadImage'
import uploadImgs from '@/tt_components/uploadImgs'
import uploadFile from '@/tt_components/uploadFile'
export default {
  name: 'ttForm',
  components: {
    uploadImage,
    uploadImgs,
    uploadFile
  },
  data() {
    return {
      form: this.value,
      isEditable: false
    };
  },
  props: {
    value: [Object]
  },
  mounted: function() {},
  computed: {},
  watch: {},
  methods: {
    getImage(image, index) {
      var self = this
      var items = self.form.items
      items[index].value = image
    },
    getFile(url, index) {
      this.form.items[index].value = url;
    },
    onSubmit() {
      var self = this
      var url = self.form.url;
      var items = self.form.items;
      var params = { id: self.form.id }
      for (var index in items) {
        if (items[index].type == 'date') {
          var date = new Date(items[index].value)
          date.setHours(date.getHours() + 8);
          items[index].value = date;
        }
        if (items[index].type == 'datetime') {
          var date = new Date(items[index].value)
          params[items[index].name] = utils.dateTimeFormat(date);
          continue;
        }
        if (items[index].type == 'daterange') {
          var startDate = items[index].value[0]
          var endDate = items[index].value[1]
          if (startDate.getTime() > endDate.getTime()) {
            utils.fail('开始日期不能大于结束日期')
            return;
          }
          params[items[index].start.name] = utils.dateFormat(startDate) + ' 00:00:00';
          params[items[index].end.name] = utils.dateFormat(endDate) + ' 23:59:59';
          continue;
        }
        if (items[index].type == 'timerange') {
          var startTime = items[index].start.value
          var endTime = items[index].end.value
          var startHours = parseInt(startTime.split(':', 1)[0])
          var endHours = parseInt(endTime.split(':', 1)[0])
          var startMin = parseInt(startTime.split(':', 2)[0])
          var endMin = parseInt(endTime.split(':', 2)[0])
          if (startHours > endHours) {
            utils.fail('开始时间不能大于结束时间')
            return;
          } else if (startHours == endHours) {
            if (startMin >= endMin) {
              utils.fail('开始时间不能大于或等于结束时间')
              return;
            }
          }
          params[items[index].start.name] = startTime
          params[items[index].end.name] = endTime
          continue;
        }
        if (items[index].type == 'checkbox') {
          var value = items[index].value
          var tempValue = ''
          for (var i in value) {
            tempValue = tempValue + value[i] + ';'
          }
          params[items[index].name] = tempValue
          continue;
        }
        if (items[index].type == 'currency') {
          params[items[index].name] = items[index].value * 100.0;
          continue;
        }
        if (items[index].rules) {
          if (!utils.validateData(items[index].value)) {
            utils.fail(items[index].msg)
            return;
          }
        }
        params[items[index].name] = items[index].value
      }
      var success = function(response) {
        if (self.form.currentPage) {
          self.$message({
            message: '保存成功',
            type: 'success'
          });
          return;
        }
        window.history.go(-1)
      }
      var fail = function(data) {
        self.$message({
          message: '保存失败'
        });
        console.log(data);
      }
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    }
  }
};

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.avatar-uploader {
  overflow: hidden;
  height: 147px;
}

</style>
